<template>
  <div id="app">
    <!--查询-->
    往来日期:
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="startTime"
      style="width:180px;"
    ></el-date-picker>至
    <el-date-picker
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择日期"
      v-model="endTime"
      style="width:180px;"
    ></el-date-picker>&nbsp;&nbsp;商品类别:
    <el-select v-model="typeName" placeholder="请选择">
      <el-option v-for="bean in typeList" :label="bean.name" :key="bean.name" :value="bean.name"></el-option>
    </el-select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品编码或者名称:
    <el-input v-model="goodsName" style="width:120px;"></el-input>
    <el-button type="primary" size="medium" @click="list()">搜 索</el-button>
    <!--列表-->
    <el-table :data="dataList" tooltip-effect="dark" style="width: 100%">
      <el-table-column prop="purchaseNumber" label="进货单号" width="140px">
        <template slot-scope="scope">
          <span v-if="scope.row.purchaseNumber == undefined">{{scope.row.returnNumber}}</span>
          <span v-else>{{scope.row.purchaseNumber}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="purchaseNumber"
        label="类别"
        v-bind:formatter="typeformatter"
        width="70px"
      ></el-table-column>
      <el-table-column prop="purchaseDate" label="日期" width="160px">
        <template slot-scope="scope">
          <span v-if="scope.row.purchaseDate == undefined">{{scope.row.returnDate}}</span>
          <span v-else>{{scope.row.purchaseDate}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="supplierName" label="供应商" show-overflow-tooltip></el-table-column>
      <el-table-column prop="code" label="商品编码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="商品名称" width="180px"></el-table-column>
      <el-table-column prop="model" label="商品型号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="typeName" label="商品类别" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unit" label="单位" show-overflow-tooltip></el-table-column>
      <el-table-column prop="price" label="单价" show-overflow-tooltip></el-table-column>
      <el-table-column prop="num" label="数量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="total" label="总金额" show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>

<script>
var quan;
export default {
  name: "app",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      dataList: [],
      typeList: [],
      startTime: "",
      endTime: "",
      typeName: "",
      goodsName: ""
    };
  },
  mounted: function() {
    quan = this;
    quan.getGoodsType();
    quan.getCurrentMonthFirst();
  },
  methods: {
    list: function() {
      quan.axios
        .get("http://localhost:9999/biz/purchase/purchaseList", {
          params: {
            access_token: localStorage.getItem("access_token"),
            startTime: quan.startTime,
            endTime: quan.endTime,
            goodsName: quan.goodsName,
            typeName: quan.typeName
          }
        })
        .then(function(res) {
          quan.dataList = res.data.obj;
        });
    },
    getGoodsType: function() {
      quan.axios
        .get("http://localhost:9999/biz/purchase/getGoodsType", {
          params: {
            access_token: localStorage.getItem("access_token")
          }
        })
        .then(function(res) {
          quan.typeList = res.data.obj;
        });
    },
    typeformatter: function(row) {
      if (row.purchaseNumber) {
        return "进货";
      }
      return "退货";
    },
    getCurrentMonthFirst: function() {
      var date = new Date();
      var month = parseInt(date.getMonth() + 1);
      var month1 = parseInt(date.getMonth());
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      quan.startTime = date.getFullYear() + "-" + month1 + "-" + day;
      quan.endTime = date.getFullYear() + "-" + month + "-" + day;
    }
  }
};
</script>